<template>

  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :modal="false" :show-close="false" align-center destroy-on-close title="登录" width="500">
    <div style="text-align: center;margin-bottom: 50px;">
      <el-image :src="logoPath" style="width: 100px;"/>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules" status-icon>
      <el-form-item prop="username">
        <el-input v-model="form.username" autocomplete="off" placeholder="用户名" size="large" type="text" @keyup.enter.native="submit"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" autocomplete="off" placeholder="密码" show-password size="large" type="password" @keyup.enter.native="submit"/>
      </el-form-item>
      <el-form-item>
        <el-button size="large" style="width: 100%" type="primary" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
      logoPath: import.meta.env.BASE_URL + '/covers.png',
      form: {
        username: null,
        password: null
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'change'}],
        password: [{required: true, message: '请输入密码', trigger: 'change'}],
      }
    }
  },
  methods: {
    async submit() {
      var $ref = this.$refs['formRef'];
      await $ref.validate(async (valid, fields) => {
        if (!valid) {
          return
        }
        let data = await this.post('/pc/auth/login', {"username": this.form.username, "password": this.form.password});
        localStorage.setItem("X-Token", data)
        this.$router.push("/")
      })
    }
  }
}
</script>


<style lang="scss">
.demo-form {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
<!--<script setup>-->
<!--import HelloB from "@/components/b/HelloA.vue";-->
<!--import HelloA from "@/components/a/HelloA.vue";-->
<!--</script>-->
<!--<script setup>-->
<!--import HelloB from "@/components/HelloA.vue";-->
<!--</script>-->
